<template>
	<el-popover placement="bottom" width="140" v-model="visibleBox">
		<div @mouseenter="visibleBox=true" @mouseleave="visibleBox=false">
			<ul class="form-list">
				<li :class="{'active':active}" @mouseenter="active=true,active2=false">
					<el-popover placement="right" width="140" trigger="hover" v-model="visibleBox2">
						<div @mouseenter="visibleBox=true" @mouseleave="visibleBox=false,active=false,active2=false">
							<ul class="form-list">
								<li>
									<el-tooltip class="item" effect="dark" content="点击添加联系人" placement="right" :enterable="false">
										<div class="down-pad" @click="openFormDialog"><i class="iconfont icon-contact"></i>联系人</div>
									</el-tooltip>
								</li>
							</ul>
						</div>
						<div slot="reference">
							<div class="down-pad"><i class="iconfont icon-fast-form"></i>快捷表单</div>
						</div>
					</el-popover>
				</li>
				<li :class="{'active':active2}" @mouseenter="active2=true,active=false">
					<el-popover placement="right" width="140" trigger="hover" v-model="visibleBox3">
						<div @mouseenter="visibleBox=true" @mouseleave="visibleBox=false,active=false,active2=false">
							<ul class="form-list">
								<li>
									<el-tooltip class="item" effect="dark" content="点击添加输入框" placement="right" :enterable="false">
										<div class="down-pad" @click="openInputDialog"><i class="iconfont icon-input-box"></i>输入框</div>
									</el-tooltip>
								</li>
							</ul>
						</div>
						<div slot="reference">
							<div class="down-pad"><i class="iconfont icon-option"></i>选项</div>
						</div>
					</el-popover>
				</li>
				<li @mouseenter="active2=false,active=false">
					<el-tooltip class="item" effect="dark" content="一个场景建议只添加一个" placement="right" :enterable="false">
						<div class="down-pad" @click="addSubmit"><i class="iconfont icon-submit-button"></i>提交按钮</div>
					</el-tooltip>
				</li>
			</ul>
		</div>
		<div slot="reference" style="padding:0 0 10px;" @mouseenter="visibleBox=true" @mouseleave="visibleBox=false">
			<i class="iconfont icon-form"></i><span>表单</span>
		</div>
	</el-popover>
</template>

<script>
	export default {
		name: 'NavForm',
		data() {
			return {
				visibleBox: false,
				visibleBox2: false,
				visibleBox3: false,
				active: false,
				active2: false,
				pickFormInfo: [{
						type: "Input",
						value: '姓名'
					},
					{
						type: "Input",
						value: '手机'
					},
					{
						type: "Input",
						value: '邮箱'
					},
					{
						type: "Button",
						value: '提交'
					}
				]
			}
		},
		methods: {
			// 快捷表单-联系人
			openFormDialog() {
				this.$store.dispatch('addNewFormComp', {
					content: this.pickFormInfo
				})
			},
			// 选项-输入框
			openInputDialog() {
				this.$store.commit('SET_PICK_INPUT', {
					status: true,
					callback: (result) => {
						this.$store.dispatch('addNewComp', {
							name: 'Input',
							text: result.text,
							color: result.color
						})
					}
				})
			},
			// 提交按钮
			addSubmit() {
				//       this.$store.dispatch('addNewComp', {
				//         name: 'Button',
				//         text: '提交'
				//       })
				this.$store.commit('SET_PICK_SUBMIT', {
					status: true,
					callback: (result) => {
						this.$store.dispatch('addNewComp', {
							name: 'Button',
							text: '提交'
						})
					}
				})
			}
		}
	}
</script>

<style lang="css" scoped>

</style>
